import React from "react";
import { App } from "antd";
import { useTheme } from "../contexts/ThemeContext";
import { themes } from "../config/themes";
import type { ThemeId } from "../types/theme";
import CustomModal from "./common/CustomModal";

interface ThemeModalProps {
  open: boolean;
  onClose: () => void;
}

const ThemeModal: React.FC<ThemeModalProps> = ({ open, onClose }) => {
  const { themeId, setTheme } = useTheme();
  const { message } = App.useApp();

  // 主题切换处理
  const handleThemeChange = (newThemeId: ThemeId) => {
    setTheme(newThemeId);
    message.success(
      `已切换到${themes.find((t) => t.id === newThemeId)?.name}主题`
    );
    onClose();
  };

  return (
    <CustomModal
      title="选择主题"
      open={open}
      onCancel={onClose}
      footer={null}
      width={480}
    >
      <div className="grid grid-cols-2 gap-4 py-4">
        {themes.map((themeOption) => (
          <div
            key={themeOption.id}
            onClick={() => handleThemeChange(themeOption.id as ThemeId)}
            className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 hover:shadow-md ${
              themeId === themeOption.id
                ? "border-blue-500 bg-blue-50"
                : "border-gray-200 hover:border-gray-300"
            }`}
          >
            <div className="flex items-center space-x-3 mb-3">
              <div className="flex space-x-1">
                <div
                  className="w-4 h-4 rounded-full border border-gray-200"
                  style={{ backgroundColor: themeOption.colors.primary[500] }}
                />
                <div
                  className="w-4 h-4 rounded-full border border-gray-200"
                  style={{ backgroundColor: themeOption.colors.primary[300] }}
                />
                <div
                  className="w-4 h-4 rounded-full border border-gray-200"
                  style={{ backgroundColor: themeOption.colors.primary[100] }}
                />
              </div>
              <span className="font-medium text-gray-800">
                {themeOption.name}
              </span>
            </div>

            {/* 主题预览 */}
            <div
              className="h-8 rounded-md"
              style={{
                background: `linear-gradient(to right, 
                  ${themeOption.colors.primary[100]} 0%, 
                  ${themeOption.colors.primary[200]} 50%, 
                  ${themeOption.colors.primary[300]} 100%
                )`,
              }}
            />

            {themeId === themeOption.id && (
              <div className="mt-2 text-center">
                <span className="text-xs text-blue-600 font-medium">
                  当前主题
                </span>
              </div>
            )}
          </div>
        ))}
      </div>
    </CustomModal>
  );
};

export default ThemeModal;
